"use client"

import React, { useEffect } from "react";
import { useStore } from "react-redux";
import { RootState } from "../redux/store";
import { useMemo } from "react";
import { notification } from 'antd';


const Context = React.createContext({ name: 'Default' });

export default function Home() {
  const localStorageRole = useMemo(() => {
    if (localStorage.getItem('role')) {
      return JSON.parse(localStorage.getItem('role') as string).role;
    }
    return 'error name';
  },[]) as string;
  const store = useStore().getState() as RootState;
  const [api, contextHolder] = notification.useNotification();


  const openNotification = (placement: string | undefined) => {
    api.info({
      message: `welcome ${placement}`,
      description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
      placement: 'topRight',
    });
  };

  useEffect(() => {
    openNotification(store?.routesList?.role || localStorageRole);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

    return (
      <>
        {contextHolder}
        <div>
          <h1>Home</h1>
        </div>
      </>
    );
  }